<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <script src="../lib/echarts.min.js"></script>
        <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    </head>
    
    <body>
        <div>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>
    
    
        <script>
            var chartDom = document.getElementById('main');
            var myChart1 = echarts.init(chartDom);
    
            $.ajax({
                "url":"http://localhost:8080/good/echartBar",
                "data":{},
                "success":function (result){
    
                    var typeList=[];
                    var typeCount=[];
    
                    var arr = result.data.typeBar;
                    for(var i=0;i<arr.length;i++){
                        typeList.push(arr[i].type);
                        typeCount.push(arr[i].count)
                   }   
    
    
    
    
                    var option = {
                        title: {
                            text: '商品类型比例饼状图',
                            subtext: 'Good Data',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                { value: typeCount[1], name: typeList[1] },
                                { value: typeCount[0], name: typeList[0] },
                                { value: typeCount[2], name: typeList[2] },
                                ],
    
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
    
    
                    myChart1.setOption(option);
                },
                "dataType":"json"
            });
    
    
    
        </script>
        </div>

<body>
    <div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main2" style="width: 600px;height:400px;"></div>


    <script>
        var chartDom = document.getElementById('main2');
        var myChart2 = echarts.init(chartDom);

        $.ajax({
            "url":"http://localhost:8080/error/echartsPie",
            "data":{},
            "success":function (result){
                option = {
                    title: {
                        text: '失误处罚比例饼状图',
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: result.data.punishPie,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };


                myChart2.setOption(option);
            },
            "dataType":"json"
        });



    </script>
    </div>


    <div>
    <div id="main3" style="width: 600px;height:400px;"></div>
    <script>
        var chartDom = document.getElementById('main3');
        var myChart3 = echarts.init(chartDom);

        $.ajax({
            "url":"http://localhost:8080/aftersale/echartsPie",
            "data":{},
            "success":function (result){
                option = {
                    title: {
                        text: '退款状态成功比例',
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: result.data.statePie,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };


                myChart3.setOption(option);
            },
            "dataType":"json"
        });

    </script>
    </div>


    <div>
    <div id="main4" style="width: 600px;height:400px;"></div>


    <script>
        var chartDom = document.getElementById('main4');
        var myChart4 = echarts.init(chartDom);

        $.ajax({
            "url":"http://localhost:8080/grade/columnarPicVo",
            "data":{},
            "success":function (result){
                option = {
                    title: {
                        text: '合作商等级比例',
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: result.data.agePie,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };


                myChart4.setOption(option);
            },
            "dataType":"json"
        });

    </script>
</div>



</body>


</html>